﻿@using SquishIt.Framework;
@using JabbR
@using JabbR.ViewModels
@using PagedList
@model NotificationsViewModel
@{
    var notificationsViewModel = Model as NotificationsViewModel;
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" />
    <title>JabbR - notifications</title>
    <link href='https://fonts.googleapis.com/css?family=Lato:100italic,300italic,700italic,100,300,700' rel='stylesheet' type='text/css'>
    @{ 
        WriteLiteral(Bundle.Css()
            .Add("~/Content/bootstrap.min.css")
            .Add("~/Content/bootstrap-responsive.min.css")
            .Add("~/Content/font-awesome.min.css")
            .Add("~/Content/themes/default/Chat.css")
            .Add("~/Content/emoji20.css")
            .Render("~/Content/JabbR_#.css"));
    }
</head>
<body class="notifications">
    <section id="page" role="application">
        <header id="heading" role="heading">
            <div class="banner" role="banner">
                <h1>JabbR</h1>
            </div>
        </header>
        <div class="container">
            <div class="row" style="padding-top: 75px;">
                @Html.AlertMessages()
                <div class="row">
                    <div class="span2">
                        <span class="notifications-title pull-left">@LanguageResources.Notifications</span>
                    </div>
                    <div class="span2 offset8 pull-right">
                        <a href="#" class="btn btn-mini pull-right js-mark-all-as-read @(notificationsViewModel.UnreadCount == 0 ? "disabled" : "")" data-action-url="@Url.Content("~/notifications/markallasread")">@LanguageResources.Notifications_MarkAllRead</a>
                    </div>
                </div>
                <hr />
            </div>
            <div class="tabbable tabs-left">
                <ul class="nav nav-tabs">
                    <li class="@(!Model.ShowAll ? "active" : "")">
                        <a href="@Url.Content("~/notifications")">
                            @Html.Raw(String.Format(LanguageResources.Notifications_UnreadWithCount, Model.UnreadCount))
                        </a>
                    </li>
                    <li class="@(Model.ShowAll ? "active" : "")">
                        <a href="@Url.Content("~/notifications?all=true")">@LanguageResources.Notifications_AllNotifications</a>
                    </li>
                </ul>
                <div class="tab-content">
                    @if (notificationsViewModel.Notifications.Count > 0)
                    {
                        <ul id="notifications-container" class="unstyled" data-mode="@(Model.ShowAll ? "all" : "unread")">
                            @foreach (var notification in notificationsViewModel.Notifications)
                            {
                                <li data-notification-id="@notification.NotificationKey" class="notification-item @(!notification.Read ? "notification-unread" : "")">
                                    @if (!notification.Read)
                                    {
                                        <a href="#" title="@LanguageResources.Notifications_MarkAsRead" class="pull-right js-mark-as-read" data-action-url="@Url.Content("~/notifications/markasread")" data-notification-id="@notification.NotificationKey">
                                            <i class="icon-large icon-ok-circle"></i>
                                        </a>
                                    }
                                    <blockquote>
                                        <p class="@(notification.HtmlEncoded ? "" : "linkify")">@notification.Message</p>
                                        <small>
                                            <img class="gravatar" src="https://secure.gravatar.com/avatar/@notification.FromUserImage?s=16&amp;d=mm" />
                                                @Html.Raw(String.Format(LanguageResources.Notifications_MetadataInfo, 
                                                                        Encoder.HtmlEncode(notification.FromUserName), 
                                                                        Encoder.HtmlEncode(notification.RoomName), 
                                                                        Encoder.HtmlEncode(notification.WhenString)))
                                        </small>
                                    </blockquote>
                                </li>
                            }
                        </ul>
                        <div id="notifications-pager">
                            @Html.SimplePager(notificationsViewModel.Notifications, Model.ShowAll ? "?all=true&" : "?")
                        </div>
                    }
                    <p id="no-notifications" class="well well-large" @Html.DisplayNoneIf(model => model.Notifications.Count > 0)>@LanguageResources.Notifications_NoUnread</p>
                </div>
            </div>
        </div>
    </section>
    <script id="multiline-content-template" type="text/x-jquery-tmpl">
        <pre class="multiline">${content}</pre>
    </script>
    @{
        WriteLiteral(Bundle.JavaScript()
            .Add("~/Scripts/jquery-2.0.3.min.js")
            .Add("~/Scripts/json2.min.js")
            .Add("~/Scripts/bootstrap.js")
            .Add("~/Scripts/jQuery.tmpl.min.js")
            .Render("~/Scripts/JabbR1_#.js"));
    }
    @{
        WriteLiteral(Bundle.JavaScript()
            .Add("~/Scripts/moment.min.js")
            .Add("~/Scripts/ba-linkify.min.js")
            .Add("~/Scripts/Markdown.Converter.js")
            .Add("~/Scripts/jquery.pubsub.js")
            .Add("~/Chat.emoji.js")
            .Add("~/Chat.utility.js")
            .Add("~/notifications.unreadcounter.js")
            .Add("~/notifications.js")
            .Render("~/Scripts/JabbR2_#.js"));
    }
</body>
</html>
